<script lang="ts" setup>
// import { ElPagination } from "element-plus"
import { computed } from 'vue';
import { useScrollTo } from '@/hooks/event/useScrollTo'
const props = defineProps({
  // 总数
  total: {
    required: true,
    type: Number
  },
  // 当前页数
  page: {
    type: Number,
    default: 1
  },
  // 每页个数
  limit: {
    type: Number,
    default: 10
  },
  // 组件布局，子组件名用逗号分隔
  layout: {
    type: String,
    default: 'total, prev, pager, next, jumper,size'
  },
  // 是否为分页按钮添加背景色
  background: {
    type: Boolean,
    default: true
  },
  // 是否在切换页时自动回到顶部
  autoScroll: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['update:page', 'update:limit', 'pagination'])

const currentPage = computed({
  get: () => props.page,
  set: (val) => {
    emits('update:page', val)
    if (val !== props.page) {
      handleCurrentChange(val)
    }
  }
})

const pageSize = computed({
  get: () => props.limit,
  set: (val) => {
    emits('update:limit', val)
  }
})

/**
 * 当前页 改变时会触发
 * @param val 页数
 */
const handleCurrentChange = (val: number) => {
  emits('pagination', { page: val, limit: pageSize.value })
  if (props.autoScroll) {
    useScrollTo(0, 800, () => { })
  }
}
</script>

<template>
  <div class="flex-center pagination">
    <span class="page-total">共{{ total }}条数据</span>
    <div class="flex-center">
      <el-pagination :background="background" :total="total" v-model:current-page="currentPage"
        v-model:page-size="pageSize" layout="prev, pager, size, next,jumper"></el-pagination>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  position: relative;
  padding: 1rem 2rem;
  text-align: center;
  vertical-align: middle;
  background-color: #fff;
  margin-top: 2rem;

  .page-total {
    position: absolute;
    left: 0;
    font-weight: 700;
    color: $green;
    font-size: 1.6rem;
  }
}
</style>
<style lang="scss">
// 调整分页组件样式
.el-pagination.is-background .el-pager li.is-active {
  background-color: $green;
}

.el-pager li:hover {
  color: $green;
  font-weight: 700;
  font-size: 14px;
}
</style>